<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import { VxePagerEvents } from "vxe-table";
import {
  waitingLotList,
  runningLotList,
  holdLotList,
  waitingIcon,
  runningIcon,
  holdingIcon
} from ".";
defineOptions({
  name: "Welcome"
});

const tableData = ref([]);
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

const cardList = ref([
  {
    id: "waiting",
    title: "Waiting Lot",
    count: waitingLotList.length,
    iconUrl: waitingIcon,
    data: waitingLotList,
    isActive: true
  },
  {
    id: "running",
    title: "Running Lot",
    count: runningLotList.length,
    iconUrl: runningIcon,
    data: runningLotList,
    isActive: false
  },
  {
    id: "hold",
    title: "Hold Lot",
    count: holdLotList.length,
    iconUrl: holdingIcon,
    data: holdLotList,
    isActive: false
  }
]);
const onClick = (data: any) => {
  cardList.value.forEach(item => {
    item.isActive = item.id === data.id;
    if (item.id === data.id) tableData.value = item.data;
  });
};
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
};

// chart
const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});
setOptions({
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "5%",
    left: "center"
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["32%", "70%"],
      center: ["50%", "50%"],
      color: ["#f5a540", "#3a811d", "#b22824"],
      itemStyle: {
        borderRadius: 5,
        borderColor: "#fff",
        borderWidth: 2
      },
      label: {
        show: false,
        formatter: "{b}\n{d}%",
        fontSize: "16px",
        position: "center"
      },
      emphasis: {
        label: {
          show: true,
          fontWeight: "bold"
        }
      },
      data: [
        { value: waitingLotList.length, name: "Waiting Lot" },
        { value: runningLotList.length, name: "Running Lot" },
        { value: holdLotList.length, name: "Hold Lot" }
      ]
    }
  ]
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);

onMounted(() => {
  tableData.value = waitingLotList;
});
</script>
<template>
  <div class="content-box">
    <el-row :gutter="20">
      <el-col
        :span="6"
        v-for="item in cardList"
        :key="item.id"
        @click="onClick(item)"
      >
        <div class="card-box">
          <div class="card-header">{{ item.title }}</div>
          <div class="card-content">
            <el-row style="height: 100%">
              <el-col :span="12">
                <div class="content-item">
                  <div
                    class="card-item-number"
                    :class="{ activeSize: item.isActive }"
                  >
                    {{ item.count }}
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="content-item">
                  <div class="card-img-content">
                    <img :src="item.iconUrl" class="card-img" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="margin-top-20">
      <el-col :span="12">
        <div class="table-box">
          <vxe-table
            :data="tableData"
            border
            row-id="lotID"
            show-overflow
            :row-config="{ height: 24 }"
            height="100%"
            width="100%"
            :column-config="{ resizable: true }"
          >
            <vxe-column field="productId" :title="$t('product')" />
            <vxe-column field="lotId" :title="$t('lot')" />
            <vxe-column field="qty" :title="$t('qty')" />
            <vxe-column field="step" :title="$t('step')" />
            <vxe-column field="station" :title="$t('station')" />
            <vxe-column field="QTimeMin" :title="$t('qtimeMin')" />
          </vxe-table>
          <div class="page-box">
            <vxe-pager
              :layouts="[
                'Sizes',
                'PrevJump',
                'PrevPage',
                'Number',
                'NextPage',
                'NextJump',
                'FullJump',
                'Total'
              ]"
              v-model:current-page="tablePage.currentPage"
              v-model:page-size="tablePage.pageSize"
              :total="tablePage.total"
              @page-change="handlePageChange"
            >
            </vxe-pager>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-box">
          <div ref="pieChartRef" style="width: 100%; height: 100%"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
@import url("index.scss");
</style>
